<template>
  <div class="con-box">
     <findPassword></findPassword>
      <div class="con">
            <div class="progress-con">
                <div class="progress">
                    <div class="line">
                        <p class="circle1 active">
                            <span class="num">1</span>
                            <span class="text">手机验证</span>
                        </p>
                        <p class="circle2 active">
                            <span class="num">2</span>
                            <span class="text">设置新密码</span>
                        </p>
                        <p class="circle3 active">
                            <span class="num">3</span>
                            <span class="text">设置成功</span>
                        </p>
                   </div>
                   <div class="line-active" :style="{width:((1/3)*1000)*partNum+'px'}"></div>
                </div>
            </div>
            <div class="form">
                    <div  class="correct-success">
                        <i class="finish"></i>
                        <p class="success-text">密码修改成功!</p>
                        <p class="auto-home"> <span>{{lastTime}}</span>秒后自动跳转回登录页</p>
                    </div>
            </div>
      </div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            partNum: 3,
            lastTime: 4 // 3秒后跳转
        }
    },
    created() {
        this.goHome()// 跳转首页
    },
    methods: {
        // 三秒钟跳转首页
        // goHome() {
        //     setTimeout(() => {
        //         // this.$router.push({ path: '/login'});
        //     }, 3000)
        // },
         // 倒计时
        goHome() {
            if (this.lastTime==1) {
                this.$router.push({ path: '/login'});
                // //console.log('666')
            } else {
                this.lastTime--;
                setTimeout(() => {
                    this.goHome();
                }, 1000);
            } 
        }
    }
}
</script>
<style lang="scss" scoped>
.con-box{
    width:100%;
    height: 100%;
    .con{
        padding-top:50px;
         margin:0 auto;
         width: 1000px;
         .progress-con{
             position: relative;
            .progress{
                position: absolute;
                top:0px;
                left:0px;
                    .line{
                        width:1000px;
                        height: 6px;
                        background: #dddddd;
                        border-radius: 3px;
                        position: relative;
                        p{
                            display: block;
                            width:333px;
                            text-align: center;
                            float: left;
                            height:6px;
                            background: #dddddd;
                            border-radius: 3px;
                            text-align: center;
                            z-index:10;
                             .num{
                                display: inline-block;
                                height: 30px;
                                line-height: 30px;
                                width:30px;
                                border-radius: 15px;
                                background: #dddddd;
                                color:#fff;
                                font-size:14px;
                                text-align: center;
                                position: relative;
                                top:-14px;
                                z-index:30;
                             }
                            .text{
                                font-size:17px;
                                text-align: center;
                                color:#666;
                                height: 30px;
                                line-height: 30px;
                                display:block;
                            }
                        }
                        .active{
                             .num{
                                  background: #ff5e2c;
                             }
                        }
                    }
                    .line-active{
                        height: 6px;
                        background: #ff5e2c;
                        border-radius: 3px;
                        position: absolute;
                        top:0px;
                        z-index: 2;
                    }
            }
         }     
        .form{
            margin:0 auto;
            width: 530px;
            margin-top:160px;
            .correct-success{
                 width:260px;
                 text-align: center;
                 margin:0 auto;
                 color:#999;
                 i{
                     display: block;
                     width:100%;
                     height: 90px;
                     background: url(../../images/login/gou.png) no-repeat;
                     background-position: center;
                 }
                 .success-text{
                     height: 36px;
                     line-height: 36px;
                     font-size:34px;
                     color:#999;
                     margin:30px 0px 40px;
                 }
                 .auto-home{
                     span{
                         color:#ff5e2c;
                         font-size: 17px;
                         display:inline-block;
                         padding:0 4px 0px 0;
                     }
                 }
             }
        }
    }
}
</style>
